/**
 * 试卷规则详情
 */
<template>
    <el-form v-loading="loading" :model="formData" :rules="currentFormRules" ref="formRef" label-width="120px" :scroll-to-error="true">
        <vp-card>
            <template #header>
                <vp-label zh="基本信息" en="Basic Info" />
            </template>
            <el-row>
                <vp-col :span="2">
                    <el-form-item prop="gzmc">
                        <template #label><vp-label zh="规则名称" en="Rule Name" /></template>
                        <el-input v-model="formData.gzmc" v-if="isEditPage" v-trim maxlength="100">
                        </el-input>
                        <span v-else>{{ formData.gzmc }}</span>
                    </el-form-item>
                </vp-col>
                <vp-col :span="4">
                    <el-form-item prop="zf">
                        <template #label><vp-label zh="总分" en="Total Score" /></template>
                        <el-input v-model="formData.zf" v-if="isEditPage" @input="(val:string) => {formData.zf = verifiyNumberInteger(val) }" v-trim maxlength="10">
                        </el-input>
                        <span v-else>{{ formData.zf }}</span>
                    </el-form-item>
                </vp-col>
                <vp-col :span="4">
                    <el-form-item prop="hgfs">
                        <template #label><vp-label zh="合格分数线" en="Qualifying Score" /></template>
                        <el-input v-model="formData.hgfs" v-if="isEditPage" @input="(val:string) => {formData.hgfs = verifiyNumberInteger(val) }" v-trim maxlength="10">
                        </el-input>
                        <span v-else>{{ formData.hgfs }}</span>
                    </el-form-item>
                </vp-col>
            </el-row>
            <el-row>
                <vp-col :span="2">
                    <el-form-item prop="kczid">
                        <template #label><vp-label zh="课程" en="Course"/></template>
                        <el-input v-model="formData.kcms" readonly v-if="type === 'add' || type === 'edit'">
                            <template #append>
                                <el-button @click="handleChooseCourse"><SvgIcon name="ele-Search" /></el-button>
                            </template>
                        </el-input>
                        <span v-else>{{formData.kcms}}</span>
                    </el-form-item>
                </vp-col>
                <vp-col :span="4">
                    <el-form-item prop="zdsc">
                        <template #label><vp-label zh="最低时长(分钟)" en="Min Dur. (Min.)"/></template>
                        <el-input v-model="formData.zdsc" v-if="isEditPage" @input="(val:string) => {formData.zdsc = verifiyNumberInteger(val) }" v-trim maxlength="10">
                        </el-input>
                        <span v-else>{{ formData.zdsc }}</span>
                    </el-form-item>
                </vp-col>
                <vp-col :span="4">
                    <el-form-item prop="zgsc">
                        <template #label><vp-label zh="最高时长(分钟)" en="Max Dur. (Min.)"/></template>
                        <el-input v-model="formData.zgsc" v-if="isEditPage" @input="(val:string) => {formData.zgsc = verifiyNumberInteger(val) }" v-trim maxlength="10">
                        </el-input>
                        <span v-else>{{ formData.zgsc }}</span>
                    </el-form-item>
                </vp-col>
            </el-row>
            <el-row>
                <vp-col :span="1">
                    <el-form-item prop="bz">
                        <template #label><vp-label zh="备注" en="Remark"/></template>
                        <el-input 
                            type="textarea" 
                            v-model="formData.bz" 
                            maxlength="1000" 
                            :autosize="{ minRows: 4}"
                            v-if="isEditPage"
                        >
                        </el-input>
                        <span v-else >{{ formData.bz }}</span>
                    </el-form-item>
                </vp-col>
            </el-row>
            <el-row>
                <vp-col :span="1">
                    <el-form-item prop="questionBanks">
                        <template #label><vp-label zh="规则题库" en="Question Banks"/></template>
                        <vp-table :data="formData.questionBanks">
                            <el-table-column type="index" align="center" label="#"></el-table-column>
                            <el-table-column min-width="160" show-overflow-tooltip>
                                <template #header><vp-label zh="题库" en="Question Bank"/></template>
                                <template #default="scope">
                                    <el-form-item :prop="`questionBanks[${scope.$index}].tkid`" :rules="[validateUtils.notNull]" label-width="auto" v-if="isEditPage">
                                        <QuestionBankSelect
                                            v-model="scope.row.tkid"
                                            class="w100"
                                        />
                                    </el-form-item>
                                    <span v-else>{{ scope.row.mc }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column min-width="120" show-overflow-tooltip>
                                <template #header><vp-label zh="单选题数量" en="Single-Choice Qty."/></template>
                                <template #default="scope">
                                    <el-form-item :prop="`questionBanks[${scope.$index}].ctsDx`" :rules="[validateUtils.notNull]" label-width="auto" v-if="isEditPage">
                                        <el-input v-model="scope.row.ctsDx" @input="(val:string) => {scope.row.ctsDx = verifiyNumberInteger(val) }" maxlength="4"/>
                                    </el-form-item>
                                    <span v-else>{{ scope.row.ctsDx }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column min-width="120" show-overflow-tooltip>
                                <template #header><vp-label zh="单选题分数" en="Single-Choice Score"/></template>
                                <template #default="scope">
                                    <el-form-item :prop="`questionBanks[${scope.$index}].mtfsDx`" :rules="[validateUtils.notNull]" label-width="auto" v-if="isEditPage">
                                        <el-input v-model="scope.row.mtfsDx" @input="(val:string) => {scope.row.mtfsDx = verifyNumberIntegerAndFloat1(val) }" maxlength="4" />
                                    </el-form-item>
                                    <span v-else>{{ scope.row.mtfsDx }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column min-width="120" show-overflow-tooltip>
                                <template #header><vp-label zh="多选题数量" en="Mult-Choice Qty."/></template>
                                <template #default="scope">
                                    <el-form-item :prop="`questionBanks[${scope.$index}].ctsDuox`" :rules="[validateUtils.notNull]" label-width="auto" v-if="isEditPage">
                                        <el-input v-model="scope.row.ctsDuox" @input="(val:string) => {scope.row.ctsDuox = verifiyNumberInteger(val) }" maxlength="4" />
                                    </el-form-item>
                                    <span v-else>{{ scope.row.ctsDuox }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column min-width="120" show-overflow-tooltip>
                                <template #header><vp-label zh="多选题分数" en="Mult-Choice Score"/></template>
                                <template #default="scope">
                                    <el-form-item :prop="`questionBanks[${scope.$index}].mtfsDuox`" :rules="[validateUtils.notNull]" label-width="auto" v-if="isEditPage">
                                        <el-input v-model="scope.row.mtfsDuox" @input="(val:string) => {scope.row.mtfsDuox = verifyNumberIntegerAndFloat1(val) }" maxlength="4" />
                                    </el-form-item>
                                    <span v-else>{{ scope.row.mtfsDuox }}</span>
                                </template>
                            </el-table-column>
                             <el-table-column min-width="120" show-overflow-tooltip>
                                <template #header><vp-label zh="判断题数量" en="True-False Qty."/></template>
                                <template #default="scope">
                                    <el-form-item :prop="`questionBanks[${scope.$index}].ctsPd`" :rules="[validateUtils.notNull]" label-width="auto" v-if="isEditPage">
                                        <el-input v-model="scope.row.ctsPd" @input="(val:string) => {scope.row.ctsPd = verifiyNumberInteger(val) }" maxlength="4"/>
                                    </el-form-item>
                                    <span v-else>{{ scope.row.ctsPd }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column min-width="120" show-overflow-tooltip>
                                <template #header><vp-label zh="判断题分数" en="True-False Score"/></template>
                                <template #default="scope">
                                    <el-form-item :prop="`questionBanks[${scope.$index}].mtfsPd`" :rules="[validateUtils.notNull]" label-width="auto" v-if="isEditPage">
                                        <el-input v-model="scope.row.mtfsPd" @input="(val:string) => {scope.row.mtfsPd = verifyNumberIntegerAndFloat1(val) }" maxlength="4" />
                                    </el-form-item>
                                    <span v-else>{{ scope.row.mtfsPd }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" width="60" v-if="isEditPage">
                                <template #header>
                                    <el-button circle @click="handleAddRow()"><SvgIcon name="ele-Plus"></SvgIcon></el-button>
                                </template>
                                <template #default="scope">
                                    <el-button circle @click="handleDeleteRow(scope.$index)"><SvgIcon name="ele-Minus"></SvgIcon></el-button>
                                </template>
                            </el-table-column>
                        </vp-table>
                    </el-form-item>
                </vp-col>
            </el-row>
        </vp-card>

        <!-- 课程单选页面 -->
		<VpCourseDialog ref="vpCourseDialogRef" @confirm="handleCourseConfirmed"></VpCourseDialog>
    </el-form>
</template>
<script setup lang="ts" name="examRule">
import { ref, defineAsyncComponent, computed, onMounted } from 'vue';
import validateUtils from '/@/utils/validateUtils';
import { verifiyNumberInteger, verifyNumberIntegerAndFloat1 } from '/@/utils/toolsValidate';
import QuestionBankSelect from '/@/components/vp/questionBank/QuestionBankSelect.vue';

const VpCourseDialog = defineAsyncComponent(() => import('/@/components/vp/course/VpCourseDialog.vue'));

const emits = defineEmits(['formSubmited']);
const props = defineProps({
    // 页面类型
	type: {
		type: String,
		default: 'add',
	},
	// 加载状态
	loading: {
		type: Boolean,
		default: false,
	},
	// 开启验证
	enableValid: {
		type: Boolean,
		default: true,
	},
});
const formData = ref({
    id:"",
    zt:10,
    kczid:"",
    kcms:"",
    gzmc:"",
    zf:"",
    hgfs:"",
    zdsc:"",
    zgsc: "",
    bz: "",
    questionBanks: [] as any[],
});
const formRules = {
    kczid:[ validateUtils.notNull ],
    gzmc:[ validateUtils.notNull ],
    zf:[ validateUtils.notNull ],
    hgfs:[ validateUtils.notNull ],
    zdsc:[ validateUtils.notNull ],
    zgsc:[ validateUtils.notNull ],
}

// 页面验证规则
const currentFormRules = computed(() => {
    if (!props.enableValid) {
        return {};
    }
    if (isEditPage.value) {
        return formRules;
    }
    return {};
})

const formRef = ref();

// 是否是编辑页面
const isEditPage = computed(() => {
    return props.type === 'add' || props.type === 'edit';
});


// 清空数据
const initFormData = ()=>{
    formData.value = {
        id:"",
        zt:10,
        kczid:"",
        kcms:"",
        gzmc:"",
        zf:"",
        hgfs:"",
        zdsc:"",
        zgsc: "",
        bz: "",
        questionBanks: [] as any[],
    }
}

// 回显数据
const setData = (data: any) => {
    initFormData();
    formData.value = {
        ...formData.value,
        ...data,
    };
}

/**
 * 获取数据
 */
const getData = (): Promise<any>=>{
    return new Promise((resolve, reject) => {
        formRef.value.validate((valid: boolean) => {
            const data = {
                ...formData.value,
            };
            if (valid) {
                resolve(data);
            } else {
                reject();
            }
        })
    })
}

// 打开课程选择弹窗
const vpCourseDialogRef = ref();
const handleChooseCourse = () => {
    vpCourseDialogRef.value.handleOpen({
        selectedId: formData.value.kczid,
    });
}

// 课程选择完成
const handleCourseConfirmed = (course: any) => {
    formData.value.kczid = course.zid;
    formData.value.kcms = (course.mcZw || '') + ' ' + (course.mcYw || '');
}

// 新增行
const handleAddRow = ()=>{
    formData.value.questionBanks.push({});
}

// 删除行
const handleDeleteRow = (index: number)=>{
    formData.value.questionBanks.splice(index, 1);
}

defineExpose({
    setData,
    getData,
})

</script>
<style scoped lang="scss">
</style>